<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>Emulatrix Banner Generator</title>
		<meta property="og:title" content="Emulatrix"/>
		<meta property="og:url" content="https://www.emulatrix.net"/>
		<meta property="og:description" content="Play Retro Games Online"/>
		<meta property="og:image" content="https://www.emulatrix.net/EmulatrixShare.png"/>
		<meta property="og:type" content="website"/>
		<meta property="og:site_name" content="Emulatrix"/>
		<meta name="theme-color" content="#000000"/>
		<meta name="mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="description" content="JavaScript Emulator. Sega Genesis, Nintendo, Super Nintendo, GameBoy, GameBoy Color, GameBoy Advance, MAME32, DOSBox and Virtual Machines."/>
		<meta name="keywords" content="emulator, abandonware, games, sega, genesis, nintendo, super, gameboy, color, advance, mame, mame32, arcade, dos, dosbox, javascript, emscripten, online, free, open, source"/>
		<link rel="icon" sizes="16x16" type="image/png" href=""/>
		<link rel="icon" sizes="192x192" type="image/png" href=""/>
		<link rel="apple-touch-icon" href=""/>
		<link rel="apple-touch-startup-image" href=""/>
		<style>
			html{margin:0;padding:0}
			body{margin:0;padding:0;background-color:white}
			canvas{display:none}
			div{position:absolute;left:0;right:0;top:0;width:516px;margin:0;background-color:white}
			input[type=file]{height:30px;font-family:Arial;font-size:13px;line-height:30px;vertical-align:top;margin:0;padding:0;box-sizing:border-box}
			img{display:block;vertical-align:bottom;margin:0 auto}
		</style>
	</head>
	<body>
		<canvas width="516" height="516" id="myCanvas"></canvas>

		<div>
			<img width="516" height="516" id="finalResult" alt="banner" src="">
		</div>

		<script>
			window.addEventListener("load", function()
				{
				// 512x512 LOGO IMAGE IN PNG FORMAT
				var logoimg = "";

				// LOADING THE LOGO IMAGE
				var image1 = new Image;
				image1.onload = update; // CALLING THE UPDATE FUNCTION WHEN THE IMAGE IS LOADED
				image1.src = logoimg;

				// GETTING ALL THE ELEMENTS IN THE WEB FORM
				var canvas = document.getElementById("myCanvas");

				// USING A VARIABLE IN ORDER TO KNOW WHEN ALL THE GRAPHICAL ELEMENTS ARE LOADED
				var elementsLoadedCounter = 0;

				function update()
					{
					// INCREASING THE ELEMENT LOADED COUNTER
					elementsLoadedCounter++;

					// CHECKING IF THE RIGHT AMOUNT OF ELEMENTS ARE LOADED
					if (elementsLoadedCounter < 1)
						{
						// IF NOT, RETURNING WITHOUT EXECUTING ANYTHING ELSE
						return;
						}

					// GETTING THE CONTEXT
					var context = canvas.getContext("2d");

					// DRAWING THE LOGO SHADOW
					var centerX = 260;
					var centerY = 260;
					var radius = 256;
					context.beginPath();
					context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
					context.fillStyle = "#101010";
					context.alpha = 0.5;
					context.closePath();
					context.fill();

					// DRAWING THE LOGO
					context.drawImage(image1, 0, 0, 512, 512);

					// EXPORTING THE PICTURE AS A PNG IMAGE IN BASE64 FORMAT
					document.getElementById("finalResult").src = canvas.toDataURL("data/png");
					}
				});
		</script>
	</body>
</html>